<script setup>
import Api from "@/api/client/user";
import { useI18n } from "vue-i18n";

const { t } = useI18n();
let formData = reactive({
  id: "",
  password:"",
  password_confirmation:"",
});

const emits = defineEmits(["refreshTable"]);

// 初始化数据
const ruleFormRef = ref();
const loading = ref(false);
const modalShow = ref(false);

const initModal = (data) => {
  modalShow.value = true;
  formData.id = data.id;
};

// 清空表单对象
const formDataBackUp = Object.assign({}, formData);

// 重置校验与数据
const resetFormKey = () => {
  ruleFormRef.value?.resetFields();
  Object.assign(formData, formDataBackUp);
};

// 校验规则
const rules = ref({
  password:[
      {
        required: true,
        message: t("hint.5"),
        trigger: "blur",
      },
      { 
        validator: (rule, value, callback) => {
        if (value.length < 6) {
          callback(new Error(t("hint.160")));
        } else {
          callback();
        }
        },
        trigger: "blur",
      }
    ],
    password_confirmation:[
      {
        required: true,
        message: t("hint.133"),
        trigger: "blur",
      },
      {
      validator: (rule, value, callback) => {
        if(value.length < 6){
          callback(new Error(t("hint.160")));
        } else if (value !== formData.password) {
          callback(new Error(t("hint.135")));
        } else {
          callback();
        }
        },
        trigger: 'blur',
      }
    ]
})

// 取消按钮事件
const cancelBtn = () => {
  //清空列表
  resetFormKey()
  //关闭弹窗
  modalShow.value = false;
};

/* 保存报溢 */
const handleSave = async () => {
  // 校验表单信息
  let isVerify = false;
  ruleFormRef.value && (await ruleFormRef.value.validate((valid) => (isVerify = valid)));
  if (!isVerify) {
    ElMessage.warning(t('hint.134'));
    return;
  }

  // 请求接口
  updataInterface();
};

const updataInterface = () => {
  loading.value = true;
  Api.usersPassWords(formData)
    .then((res) => {
      ElMessage.success(t('hint.operationSuccess'));
      modalShow.value = false;
      emits("refreshTable");
    })
    .finally(() => {
      loading.value = false;
    });
};

defineExpose({ initModal });
</script>

<template>
  <el-dialog v-model="modalShow" width="640" align-center :title="t('title.12')" @close="cancelBtn">
    <el-form ref="ruleFormRef" :rules="rules" @submit.enter.prevent label-width="auto" :model="formData" class="form-container">
      <el-form-item :label="t('form.41')" prop="password">
        <el-input class="int" v-model="formData.password" :placeholder="t('hint.66')" clearable />
      </el-form-item>
      <el-form-item :label="t('form.42')" prop="password_confirmation">
        <el-input class="int" v-model="formData.password_confirmation" :placeholder="t('hint.133')" clearable />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="cancelBtn">{{ t('btn.8') }}</el-button>
      <el-button type="primary" @click="handleSave" :loading="loading">{{ t('btn.1') }}</el-button>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
.form-item,
.int {
  width: 100%;
}
.btn {
  margin-right: 14px;
}
</style>
